<template>
  <div class="container-wrapper" :class="{ 'container-night': sideTheme == 'theme-dark' }">
    <div class="container">
      <div class="circle-container">
        <!-- 天空部分 -->
        <div class="sky">
          <div
            class="sky-night"
            :class="{ 'sky-night-fade': sideTheme == 'theme-dark' }"
          >
            <div
              class="stars"
              :class="{ 'stars-fade': sideTheme == 'theme-dark' }"
            >
              <div
                class="shooting-star"
                :class="{ shooting: sideTheme == 'theme-dark' }"
              ></div>
              <div class="star-group-1"></div>
              <div class="star-group-2"></div>
              <div class="star-group-3"></div>
              <div class="star-group-4"></div>
            </div>
          </div>

          <!-- 云彩 -->
          <div
            class="cloud-1"
            :class="{ cloud: sideTheme != 'theme-dark' }"
          ></div>
          <div
            class="cloud-2"
            :class="{ cloud: sideTheme != 'theme-dark' }"
          ></div>
          <div
            class="cloud-3"
            :class="{ cloud: sideTheme != 'theme-dark' }"
          ></div>
          <div
            class="cloud-4"
            :class="{ cloud: sideTheme != 'theme-dark' }"
          ></div>
          <div
            class="cloud-5"
            :class="{ cloud: sideTheme != 'theme-dark' }"
          ></div>
          <div
            class="cloud-6"
            :class="{ cloud: sideTheme != 'theme-dark' }"
          ></div>
          <div
            class="bird bird-1"
            :class="{ 'birds-fly': sideTheme == 'theme-dark' }"
          ></div>
          <div
            class="bird bird-2"
            :class="{ 'birds-fly': sideTheme == 'theme-dark' }"
          ></div>
          <div
            class="bird bird-3"
            :class="{ 'birds-fly': sideTheme == 'theme-dark' }"
          ></div>
        </div>

        <!-- 山川 -->
        <div class="mountains">
          <div
            class="mountain-back"
            :class="{ 'mountain-back-night': sideTheme == 'theme-dark' }"
          >
            <div
              class="mountain-back-1"
              :class="{ 'mountain-back-night': sideTheme == 'theme-dark' }"
            ></div>
            <div
              class="mountain-back-2"
              :class="{ 'mountain-back-night': sideTheme == 'theme-dark' }"
            ></div>
          </div>
          <div
            class="mountain-middle"
            :class="{ 'mountain-middle-night': sideTheme == 'theme-dark' }"
          >
            <div
              class="mountain-middle-1"
              :class="{ 'mountain-middle-night': sideTheme == 'theme-dark' }"
            ></div>
            <div
              class="mountain-middle-2"
              :class="{ 'mountain-middle-night': sideTheme == 'theme-dark' }"
            ></div>
          </div>
          <div
            class="mountain-top"
            :class="{ 'mountain-top-night': sideTheme == 'theme-dark' }"
          >
            <div
              class="mountain-top-1"
              :class="{ 'mountain-top-night': sideTheme == 'theme-dark' }"
            ></div>
          </div>
        </div>

        <!-- 太阳 -->
        <div class="sun-container">
          <div class="sun" @click="themeChange"></div>
        </div>

        <!-- 海洋 -->
        <div
          class="ocean"
          :class="{ 'animation-stop': sideTheme == 'theme-dark' }"
        >
          <div
            class="boat"
            :class="{ 'boat-sail': sideTheme == 'theme-dark' }"
          ></div>
          <div
            class="ocean-night"
            :class="{ 'ocean-night-fade': sideTheme == 'theme-dark' }"
          >
            <div
              class="moon"
              :class="{ 'moon-fade': sideTheme == 'theme-dark' }"
            ></div>

            <!-- 山川 -->
            <div class="mountains mountains-bottom">
              <div
                class="mountain-back"
                :class="{ 'mountain-back-night': sideTheme == 'theme-dark' }"
              >
                <div
                  class="mountain-back-1"
                  :class="{
                    'mountain-back-night': sideTheme == 'theme-dark',
                  }"
                ></div>
                <div
                  class="mountain-back-2"
                  :class="{
                    'mountain-back-night': sideTheme == 'theme-dark',
                  }"
                ></div>
              </div>
              <div
                class="mountain-middle"
                :class="{
                  'mountain-middle-night': sideTheme == 'theme-dark',
                }"
              >
                <div
                  class="mountain-middle-1"
                  :class="{
                    'mountain-middle-night': sideTheme == 'theme-dark',
                  }"
                ></div>
                <div
                  class="mountain-middle-2"
                  :class="{
                    'mountain-middle-night': sideTheme == 'theme-dark',
                  }"
                ></div>
              </div>
              <div
                class="mountain-top"
                :class="{ 'mountain-top-night': sideTheme == 'theme-dark' }"
              >
                <div
                  class="mountain-top-1"
                  :class="{ 'mountain-top-night': sideTheme == 'theme-dark' }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Switching">
import { useSettingsStore } from '@/store';
import { onMounted } from '@vue/runtime-core';
import anime from 'animejs';

const settingsStore = useSettingsStore();
const storeSettings = computed(() => settingsStore);
const sideTheme = computed(() => settingsStore.sideTheme);

const saveSetting = () => {
  let layoutSetting = {
    "sideTheme": storeSettings.value.sideTheme,
    "title": storeSettings.value.title,
    "showMoreSide": storeSettings.value.showMoreSide,
  };
  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
}

onMounted(() => {
  anime({
    targets: '.container-wrapper',
    opacity: 1,
    easing: 'easeInOutQuad',
  });
  anime({
    targets: '.sun-container',
    rotate: 360,
    easing: 'easeInOutQuad',
  });
  setTimeout(()=>{
    settingsStore.changeSetting({
      key: 'sideTheme',
      value: sideTheme.value=='theme-dark'?'theme-light':'theme-dark'
    });
    saveSetting();
  },1000)
  setTimeout(() => {
    anime({
      targets: '.container-wrapper',
      opacity: 0,
      easing: 'easeInOutQuad',
    });
  }, 7000);
});
</script>

<style lang="scss" scoped>
@import url(./style.css);
</style>
